import React, { useEffect } from 'react';
import {
  Box,
  Button,
  Card,
  Checkbox,
  DatePicker2,
  Divider,
  Field,
  Form,
  Input,
  Loading,
  Message,
  Radio,
  ResponsiveGrid,
  Select,
  Upload,
} from '@alifd/next';
import PageHeader from '@/components/PageHeader';
import styles from './index.module.scss';
import { requestMethod, useRequest } from '@/hooks/request';
import { getSearchParams } from 'ice';
import { Button as AButton, Col, DatePicker, Form as AForm, Input as AInput, Row } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const HealRecoUpdate = () => {
  const formRef = React.useRef<Form>(null);
  const [loadingState, setLoadingState] = React.useState<boolean>(false);
  const useField = Field.useField();
  const { id } = getSearchParams();
  const [form] = AForm.useForm();
  const store = sessionStorage.getItem('store');

  useEffect(() => {
    id &&
      useRequest(`/health-record/${id}`).then(({ data }) => {
        useField.setValues(data);
      });
  }, [id]);
  return (
    <ResponsiveGrid gap={20}>
      <ResponsiveGrid.Cell colSpan={12}>
        <PageHeader title="档案信息录入" breadcrumbs={[{ name: '档案信息管理' }, { name: '录入' }]} />
      </ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell colSpan={12}>
        <Loading tip="加载中..." visible={loadingState} fullScreen>
          <Card free>
            <Card.Header
              title={
                id ? null : (
                  <Upload
                    accept="image/*"
                    request={({ file }) => {
                      setLoadingState(true);
                      const formData = new FormData();
                      formData.append('file', file);
                      useRequest({
                        url: '/health-record/ocr',
                        method: requestMethod.POST,
                        data: formData,
                      }).then(({ data }) => {
                        useField.setValues(data);
                        setLoadingState(false);
                      });
                    }}
                  >
                    <Button type="primary">上传单据识别</Button>
                  </Upload>
                )
              }
            />
            <Card.Content>
              <Form
                labelTextAlign="left"
                labelAlign="inset"
                isPreview={!!id}
                field={useField}
                ref={formRef}
                colon
                responsive
                useLabelForErrorMessage
                fullWidth
                className={styles.form}
                size="medium"
              >
                <Form.Item colSpan={12}>
                  <h2>基本信息</h2>
                </Form.Item>
                <Form.Item
                  required
                  wrapperCol={{
                    span: 5,
                    offset: 19,
                  }}
                  colSpan={12}
                  label="编号"
                >
                  <Input placeholder="编号" name="number" />
                </Form.Item>
                <Form.Item colSpan={4} label="家长姓名" required>
                  <Input placeholder="家长姓名" name="parentName" />
                </Form.Item>
                <Form.Item label="关系" colSpan={3} required>
                  <Radio.Group name="relationship">
                    <Radio label="父亲" value="父亲" />
                    <Radio label="母亲" value="母亲" />
                  </Radio.Group>
                </Form.Item>
                <Form.Item colSpan={5} label="手机号" required>
                  <Input type="number" placeholder="手机号" name="phone" />
                </Form.Item>
                <Form.Item colSpan={3} label="学生姓名" required>
                  <Input placeholder="学生姓名" name="name" />
                </Form.Item>
                <Form.Item colSpan={3} label="性别" required>
                  <Select name="sex">
                    <Select.Option value="男" />
                    <Select.Option value="女" />
                  </Select>
                </Form.Item>
                <Form.Item colSpan={3} label="出生日期" required>
                  <DatePicker2 name="birthday" />
                </Form.Item>
                <Form.Item colSpan={3} label="民族" required>
                  <Input placeholder="民族" name="nation" />
                </Form.Item>

                <Form.Item colSpan={6} label="家庭住址" required>
                  <Input placeholder="家庭住址" name="address" />
                </Form.Item>

                <Form.Item colSpan={6} label="所在学校" required>
                  <Input placeholder="所在学校" name="school" />
                </Form.Item>

                <Form.Item colSpan={12}>
                  <h2>体验记录</h2>
                </Form.Item>
                <Form.Item colSpan={8} label="体验门店" required>
                  <Input placeholder="体验门店" name="store" />
                </Form.Item>
                <Form.Item colSpan={4} label="体验时间" required>
                  <DatePicker2 name="date" />
                </Form.Item>

                <Form.Item colSpan={2} className={styles.noBorder}>
                  体验前视力值
                </Form.Item>
                <Form.Item label="左眼" colSpan={4} required>
                  <Input placeholder="左眼" name="leftBefore" />
                </Form.Item>
                <Form.Item colSpan={1}>
                  <Checkbox name="leftBeforeAstigmatic">散光</Checkbox>
                </Form.Item>

                <Form.Item label="右眼" colSpan={4} required>
                  <Input placeholder="右眼" name="rightBefore" />
                </Form.Item>
                <Form.Item colSpan={1}>
                  <Checkbox name="rightBeforeAstigmatic">散光</Checkbox>
                </Form.Item>

                <Form.Item colSpan={2} className={styles.noBorder}>
                  体验后视力值
                </Form.Item>
                <Form.Item label="左眼" colSpan={5} required>
                  <Input placeholder="左眼" name="leftAfter" />
                </Form.Item>
                <Form.Item colSpan={5} label="右眼" required>
                  <Input placeholder="右眼" name="rightAfter" />
                </Form.Item>
                <Form.Item colSpan={12} className={styles.noBorder}>
                  <Divider />
                </Form.Item>
                <Form.Item colSpan={12} className={styles.noBorder}>
                  其他情况
                </Form.Item>
                <Form.Item colSpan={2}>
                  <Checkbox name="amblyopia">弱视</Checkbox>
                  <Input placeholder="弱视" name="amblyopiaMsg" />
                </Form.Item>
                <Form.Item colSpan={2}>
                  <Checkbox name="strabismus">斜视</Checkbox>
                  <Input placeholder="斜视" name="strabismusMsg" />
                </Form.Item>
                <Form.Item colSpan={2}>
                  <Checkbox name="mydriasis">散瞳</Checkbox>
                  <Input placeholder="散瞳" name="mydriasisMsg" />
                </Form.Item>
                <Form.Item colSpan={2}>
                  <Checkbox name="glasses">佩戴眼镜</Checkbox>
                  <Input placeholder="佩戴眼镜" name="glassesMsg" />
                </Form.Item>
                <Form.Item colSpan={2}>
                  <Checkbox name="orthok">佩戴OK镜</Checkbox>
                  <Input placeholder="佩戴OK镜" name="orthokMsg" />
                </Form.Item>
                <Form.Item colSpan={2}>
                  <Checkbox name="other">其他</Checkbox>
                  <Input placeholder="其他" name="otherMsg" />
                </Form.Item>
                <Form.Item colSpan={12} className={styles.noBorder}>
                  <Divider />
                </Form.Item>
                <Form.Item colSpan={1} className={styles.noBorder}>
                  遗传因素
                </Form.Item>
                <Form.Item colSpan={5} label="父亲">
                  <Input placeholder="父亲" name="paternalInher" />
                </Form.Item>
                <Form.Item colSpan={6} label="母亲">
                  <Input placeholder="母亲" name="maternalInher" />
                </Form.Item>
                <Form.Item colSpan={12} label="备注">
                  <Input.TextArea placeholder="备注" name="note" />
                </Form.Item>

                <Form.Item colSpan={12}>
                  <h2>缴费记录</h2>
                </Form.Item>
                <Form.Item colSpan={12}>
                  <div style={{ width: '100%' }}>
                    <AForm form={form}>
                      <AForm.List name="payment">
                        {(fields, { add, remove }) => (
                          <>
                            {fields.map(({ key, name }) => (
                              <Row align="top" key={key} gutter={15}>
                                <AInput name="number" type="hidden" />
                                <Col span={7}>
                                  <AForm.Item name={[name, 'name']} label="名称">
                                    <AInput placeholder="名称" />
                                  </AForm.Item>
                                </Col>

                                <Col span={7}>
                                  <AForm.Item name={[name, 'amount']} label="金额">
                                    <AInput placeholder="金额" />
                                  </AForm.Item>
                                </Col>
                                <Col span={7}>
                                  <AForm.Item name={[name, 'date']} label="时间">
                                    <DatePicker placeholder="时间" style={{ width: '100%' }} />
                                  </AForm.Item>
                                </Col>
                                <Col span={2}>
                                  <MinusCircleOutlined onClick={() => remove(name)} />
                                </Col>
                              </Row>
                            ))}
                            <AForm.Item>
                              <AButton type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                添加缴费记录
                              </AButton>
                            </AForm.Item>
                          </>
                        )}
                      </AForm.List>
                    </AForm>
                  </div>
                </Form.Item>
                <Form.Item colSpan={12}>
                  <Box spacing={30} direction="row" justify="center">
                    <Form.Submit
                      type="primary"
                      validate
                      onClick={async (value, errors) => {
                        if (errors) {
                          return;
                        }
                        setLoadingState(true);
                        if (store) {
                          value.storeIndex = store;
                        }
                        const { data } = await useRequest({
                          url: '/health-record',
                          method: requestMethod.POST,
                          data: value,
                        });

                        const { payment } = form.getFieldsValue();
                        if (payment && payment.length) {
                          for (const res of payment) {
                            res.number = data.number;
                            await useRequest({
                              url: '/payment',
                              method: requestMethod.POST,
                              data: res,
                            });
                          }
                        }
                        setLoadingState(false);
                        Message.success('添加成功');
                      }}
                    >
                      提交
                    </Form.Submit>
                    <Form.Reset
                      type="secondary"
                      onClick={() => {
                        form.resetFields();
                      }}
                    >
                      重置
                    </Form.Reset>
                  </Box>
                </Form.Item>
              </Form>
            </Card.Content>
          </Card>
        </Loading>
      </ResponsiveGrid.Cell>
    </ResponsiveGrid>
  );
};

export default HealRecoUpdate;
